<div id="off-lease-confirm-view">
  <div class="page">
    <div class="contract-info-container" ng-if="contract">
      <ng-form class="form-horizontal">
        <div class="form-group">
          <h4 class="text-center">合同信息</h4>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">合同号</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.uuid}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">公寓</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.apartmentName}}</div>
          </div>
          <label class="control-label col-sm-2">房间号</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.houseNo}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">租期</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.leaseName}}</div>
          </div>
          <label class="control-label col-sm-2">付款方式</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.payWayName}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">合同开始日期</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.leaseStart|dateTransfer:'YYYY-MM-DD'}}</div>
          </div>
          <label class="control-label col-sm-2">合同结束日期</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.leaseEnd|dateTransfer:'YYYY-MM-DD'}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">月租金</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.rental}}</div>
          </div>
          <label class="control-label col-sm-2">押金</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.deposit}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">上次缴租时间</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.lastLeaseTime|dateTransfer:'YYYY-MM-DD'}}</div>
          </div>
          <label class="control-label col-sm-2">下次缴租时间</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.nextLeaseTime|dateTransfer:'YYYY-MM-DD'}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">承租人</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.customerName}}</div>
          </div>
          <label class="control-label col-sm-2">手机号</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.customerPhone}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">身份证</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.customerCard}}</div>
          </div>
          <label class="control-label col-sm-2">性别</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{contract.sex|constantTransfer:sexList}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">居住人数</label>
          <div class="col-sm-3">
            <div class="input-group">
              <input type="number" class="form-control" readonly ng-model="contract.cotenants.length"
                     maxlength="4">
              <span class="input-group-addon" ng-click="openCotenant('view',contract.cotenants)">查看</span>
            </div>
          </div>
        </div>
        <!--退租信息-->
        <div class="form-group">
          <h4 class="text-center">退租信息</h4>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">退房日期</label>
          <div class="col-sm-3">
            <div class="input-group">
              <input class="form-control editable-input" type="text" uib-datepicker-popup="yyyy-MM-dd" readonly
                     ng-model="checkInfo.checkOutDate" is-open="enterStart" maxlength="10"
                     close-text="关闭" current-text="今天" clear-text="清空" required
                     placeholder=""/>
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="enterStart=true" ng-disabled="returnInfo">
                  <i class="glyphicon glyphicon-calendar"></i>
                </button>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group" >
          <div class="col-sm-4 col-sm-offset-4 text-center">
            <button ng-if="!returnInfo" class="btn btn-success" ng-disabled="!checkInfo.checkOutDate"
                    ng-click="loadReturnAmount()">办理退租</button>
            <button ng-if="returnInfo" class="btn btn-default"
                    ng-click="resetReturnInfo()">重置</button>
          </div>
        </div>
      </ng-form>
    </div>
    <div class="contract-info-container" ng-if="contract && returnInfo">
      <ng-form name="offLeaseForm" class="form-horizontal form-validation">
        <div class="form-group">
          <h4 class="text-center">退款信息</h4>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">应退押金</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{returnInfo.returnDeposit}}</div>
          </div>
          <label class="control-label col-sm-2">应退租金</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{returnInfo.returnRental}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">应退电费</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{returnInfo.returnPower}}</div>
          </div>
          <label class="control-label col-sm-2">应退水费</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{returnInfo.returnWater}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">退租时间</label>
          <div class="col-sm-3">
            <div class="input-group">
              <input class="form-control" type="text" uib-datepicker-popup="yyyy-MM-dd"
                     ng-model="checkInfo.checkOutDate" is-open="enterStart" maxlength="10"
                     close-text="关闭" current-text="今天" clear-text="清空" readonly
                     placeholder=""/>
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" disabled
                        ng-click="enterStart=true">
                  <i class="glyphicon glyphicon-calendar"></i>
                </button>
              </span>
            </div>
          </div>
          <label class="control-label col-sm-2">应退金额</label>
          <div class="col-sm-3">
            <div class="form-control info-text">{{offLeaseInfo.money}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">开户行<span class="attr-need">*</span></label>
          <div class="col-sm-8">
            <input type="text" class="form-control" required ng-readonly="offLeaseOver"
                   ng-model="offLeaseInfo.bankName"
                   placeholder="填写开户行">
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">开户名<span class="attr-need">*</span></label>
          <div class="col-sm-5">
            <input type="text" class="form-control" required ng-readonly="offLeaseOver"
                   ng-model="offLeaseInfo.bankUser"
                   placeholder="填写开户名">
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">账号<span class="attr-need">*</span></label>
          <div class="col-sm-8">
            <input type="text" class="form-control" required ng-readonly="offLeaseOver"
                   ng-model="offLeaseInfo.bankAccount"
                   placeholder="填写账号">
          </div>
        </div>
        <div class="form-group" ng-repeat="item in consumptions">
          <label class="control-label col-sm-2 col-sm-offset-1">扣款费用{{$index+1}}</label>
          <div class="col-sm-3">
            <div class="input-group">
              <span class="input-group-addon">￥</span>
              <input type="number" class="form-control" readonly
                     ng-model="item.money">
            </div>
          </div>
          <div class="col-sm-3">
            <input type="text" class="form-control" readonly ng-model="item.description" placeholder="备注">
          </div>
          <div class="col-sm-3">
            <button class="btn btn-warning" ng-if="!offLeaseOver"
                    ng-click="removeConsumption(item)">移除</button>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">退租方式<span class="attr-need">*</span></label>
          <div class="col-sm-6">
            <select ng-model="offLeaseInfo.refundType" class="form-control" required ng-readonly="offLeaseOver"
                    ng-options="option.value as option.name for option in refundType"></select>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2 col-sm-offset-1">备注<span class="attr-need">*</span></label>
          <div class="col-sm-6">
            <textarea cols="4" class="form-control" ng-model="offLeaseInfo.reason"
                      required ng-readonly="offLeaseOver"
                      placeholder="填写备注"></textarea>
          </div>
        </div>
      </ng-form>
    </div>
    <div class="confirm-container" ng-if="contract && returnInfo">
      <ng-form class="form-horizontal">
        <div class="form-group" ng-if="!offLeaseOver">
          <label class="control-label col-sm-2 col-sm-offset-1">扣款费用</label>
          <div class="col-sm-3">
            <div class="input-group">
              <span class="input-group-addon">￥</span>
              <input type="number" class="form-control" ng-model="newConsumption.money" required>
            </div>
          </div>
          <div class="col-sm-3">
            <input type="text" class="form-control" ng-model="newConsumption.description" placeholder="备注">
          </div>
          <div class="col-sm-3">
            <button class="btn btn-primary" ng-disabled="offLeaseOver || !newConsumption.money || !newConsumption.description"
                    ng-click="addConsumption()">添加</button>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-8 col-sm-offset-2 text-center">
            <button class="btn btn-primary" ng-if="!offLeaseOver"
                    ng-disabled="offLeaseForm.$invalid || !offLeaseInfo.bankName || !offLeaseInfo.bankUser || !offLeaseInfo.bankAccount"
                    ng-click="confirmOffLease()">确认退租</button>
            <button class="btn btn-primary mr-15" ng-if="offLeaseOver"
                    ng-click="$root.closeCurrentPage()">关闭页面</button>
            <button class="btn btn-warning mr-15" ng-if="offLeaseOver"
                    ng-click="printOffLeaseInfo()">打印单据</button>
          </div>
        </div>
      </ng-form>
    </div>
  </div>
  <div style="display: none">
    <div id="off-lease-print-container" ng-if="offLeaseOver">
      <style type="text/css">
        #off-lease-print-container h4 {
          margin: 20% 0 32px;
          text-align: center;
        }
        #off-lease-print-container .print-table {
          border-collapse:collapse;
          position: relative;
          width: 530px;
          margin: 0 auto;
        }

        #off-lease-print-container .print-table tr {
          min-height: 40px;
          font-size: 15px;
          vertical-align: middle;
        }
        #off-lease-print-container .print-table td {
          padding:10px 10px;
        }
      </style>
      <h4 class="text-center" style="margin:20% 0 32px;">退租单</h4>
      <div class="table-container">
        <table class="print-table table-bordered" style="width: 450px;margin: 0 auto;font-size: 15px;">
          <tr>
            <td width="100">合同号</td>
            <td colspan="3">{{contract.uuid}}</td>
          </tr>
          <tr>
            <td width="100">公寓</td>
            <td width="160">{{contract.apartmentName}}</td>
            <td width="100">房间号</td>
            <td width="160">{{contract.houseNo}}</td>
          </tr>
          <tr>
            <td width="100">退租日期</td>
            <td colspan="3">{{checkInfo.checkOutDate|dateTransfer:'YYYY年MM月DD日'}}</td>
          </tr>
          <tr>
            <td width="100">应退押金</td>
            <td width="160">{{returnInfo.returnDeposit}}&nbsp;元</td>
            <td width="100">应退租金</td>
            <td width="160">{{returnInfo.returnRental}}&nbsp;元</td>
          </tr>
          <tr>
            <td width="100">应退电费</td>
            <td width="160">{{returnInfo.returnPower}}&nbsp;元</td>
            <td width="100">应退水费</td>
            <td width="160">{{returnInfo.returnWater}}&nbsp;元</td>
          </tr>
          <tr ng-if="consumptions && consumptions.length>0">
            <td width="100">扣款金额</td>
            <td colspan="3">扣款原因</td>
          </tr>
          <tr ng-repeat="item in consumptions">
            <td width="100">{{item.money}}&nbsp;元</td>
            <td colspan="3">{{item.description}}</td>
          </tr>
          <tr>
            <td colspan="4">退款金额总计：{{offLeaseInfo.money}}&nbsp;元</td>
          </tr>
          <tr>
            <td width="100">备注</td>
            <td colspan="3" height="60">{{offLeaseInfo.reason}}</td>
          </tr>
          <tr>
            <td colspan="4" style="text-align: center;font-weight: 500;">用户账号信息</td>
          </tr>
          <tr>
            <td width="100">开户行</td>
            <td colspan="3">{{offLeaseInfo.bankName}}</td>
          </tr>
          <tr>
            <td width="100">户名</td>
            <td colspan="3">{{offLeaseInfo.bankUser}}</td>
          </tr>
          <tr>
            <td width="100">账号</td>
            <td colspan="3">{{offLeaseInfo.bankAccount}}</td>
          </tr>
          <tr>
            <td colspan="4" height="150">签名：</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>